<template>
  <div>
    <div class="info-wrapper flex">
      <a-avatar :size="70" style="margin-right: 20px" :src="userPhoto ? userPhoto : `../../../../statics/img/default.png`" />
      <div>
        <div class="name">{{  userDetail.nickName }}</div>
        <div class="account">登录账号：{{ userDetail.phone }}</div>
        <div class="enterprise-certification">企业认证：{{ userDetail.status }}</div>
      </div>
    </div>
    <div class="flex justify-around items-center" style="margin-bottom: 30px">
      <div class="flex column items-center">
        <div class="count" :class="{'cursor-pointer': systemCount > 0}" @click="goPage(systemCount,'/main/home/news/app-manage', -1)">{{systemCount}}</div>
        <div class="name">系统数</div>
      </div>
      <div class="flex column items-center">
        <div class="count" @click="goPage(usersCount,'/main/system/user-mana', Enums.SYS_PERMISSION.USER_PAGE.value)" :class="{'cursor-pointer': usersCount > 0}">{{usersCount}}</div>
        <div class="name">用户数</div>
      </div>
      <div class="flex column items-center">
        <div class="count" @click="goPage(rolesCount,'/main/factory/role-define', Enums.SYS_PERMISSION.ROLE_MENU_PAGE.value)" :class="{'cursor-pointer': rolesCount > 0}">{{rolesCount}}</div>
        <div class="name">角色数</div>
      </div>
    </div>
    <a-alert
      banner
      closable
      type="error"
      v-if="userInfo.tenant_id === 0"
    >
      <template v-slot:icon>
        <a-icon style="color: #E43434;margin-top: -10px" type="info-circle" theme="filled" />
      </template>
      <template v-slot:message>
        <div style="color: #E43434">
          您尚未进行企业认证 <span class="cursor-pointer" style="text-decoration:underline;" @click="$router.push({ path: '/main/home/news/company-indent' })">立即认证</span>
        </div>
      </template>
    </a-alert>
    <a-alert
      banner
      closable
      type="info"
      style="margin-top: 20px;margin-bottom: 18px"
      v-if="rolesCount === 1"
    >
      <template v-slot:icon>
        <a-icon style="color: #5F77FD;margin-top: -10px" type="info-circle" theme="filled" />
      </template>
      <template v-slot:message>
        <div style="color: #5F77FD">
          您尚未创建子用户 <span class="cursor-pointer" style="text-decoration:underline;" @click="$router.push({ path: '/main/system/user-mana' })">立即创建</span>
        </div>
      </template>
    </a-alert>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCompanyPrivileges, getRolesCount, getUsersCount } from '../../../../boot/home/home'

export default {
  name: 'User',
  data () {
    return {
      systemCount: 0,
      usersCount: 0,
      rolesCount: 0
    }
  },
  computed: {
    ...mapGetters({
      'userPhoto': 'userPhoto',
      'userDetail': 'userDetail',
      'userInfo': 'userInfo',
      'permissions': 'permissions'
    })
  },
  created () {
    if (this.userInfo.tenant_id !== 0) {
      this.init()
    }
  },
  methods: {
    init () {
      this.getRolesCountInfo()
      this.getUsersCountInfo()
      this.getCompanyPrivileges()
    },
    // 获取角色数
    getRolesCountInfo () {
      getRolesCount().then(res => {
        this.rolesCount = res.data
      })
    },
    // 获取用户数
    getUsersCountInfo () {
      getUsersCount().then(res => {
        this.usersCount = res.data
      })
    },
    // 获取系统数
    getCompanyPrivileges () {
      const tid = this.userInfo.tenant_id
      getCompanyPrivileges(tid).then(res => {
        const info = res.data.filter(item => {
          return !!item.startDate
        })
        this.systemCount = info.length
      })
    },
    // 跳转到相应的页面
    goPage (count, path, id) {
      if (id !== -1 && this.permissions.indexOf(id) === -1) {
        return
      }
      // 数量大于0才能跳转
      if (count > 0) {
        this.$router.push({ path: path })
      }
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .ant-alert-error{
  background-color: rgba(228, 52, 52, 0.1);
}
/deep/ .ant-alert-info{
  background-color: rgba(95, 119, 253, 0.1);
}
/deep/ .ant-alert-icon{
  top: 8px;
}
.info-wrapper{
  margin-bottom: 55px;
  padding: 0 10px;

  .avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 20px;
  }

  .name {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 6px;
  }
  .account,
  .enterprise-certification{
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #999999;
  }
}

.count{
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  color: #333333;
  margin-bottom: 20px;
}

.name{
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  color: #999999;
}
</style>
